<template>
  <v-main>
    <div v-if="isOpenBread" class="pl-2">
      <!-- 面包屑     -->
      <v-breadcrumbs :items="breas" divider="/">
        <template v-slot:item="{ item }">
          <v-breadcrumbs-item
            :to="item.path == '' ? '/' : item.path"
            :disabled="$route.path.toUpperCase() == item.path.toUpperCase()"
          >
            {{ item.meta.title.toUpperCase() }}
          </v-breadcrumbs-item>
        </template>
      </v-breadcrumbs>
    </div>

    <router-view class="router-viewpage" />

    <global-core-footer />
  </v-main>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "GlobalCoreView",

  components: {
    GlobalCoreFooter: () => import("./Footer"),
  },

  computed: {
    ...mapState({
      isOpenBread: (state) => state.app.isOpenBread,
    }),
    breas() {
      // 监听路由中的面包屑
      return this.$route.matched;
    },
  },
};
</script>
<style scoped>
/* 为对应的路由跳转时设置动画效果 */
.fade-enter-active,
.fade-leave-avtive {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.left-enter,
.left-leave-to {
  transform: translate3d(-100%, 0, 0);
}
.left-leave,
.left-enter-to {
  transform: translate3d(0, 0, 0);
}
.left-enter-active,
.left-leave-active {
  transition: all 0.2s;
}

.v-breadcrumbs {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 为了让 footer 始终紧贴浏览器窗口的下面
设置页面的下内边距，让页面元素全部显现出来 */
.router-viewpage {
  padding-bottom: 80px;
  display: flex;
}

@media screen and (max-width: 280px) {
  .router-viewpage {
    padding-bottom: 210px;
  }
}

@media screen and (max-width: 767px) and (min-width: 281px) {
  .router-viewpage {
    padding-bottom: 180px;
  }
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
  .router-viewpage {
    padding-bottom: 200px;
  }
}
</style> 
